/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import ProForm, { ProFormDatePicker, ProFormText } from '@ant-design/pro-form';
import { Card, Col, Row, Typography, Space, Button } from 'antd';
import React from 'react';
import UploadImage from './uploadImage';
import { useAliappInfoItem } from '../_utils/useAliappInfoItem';
const { Title } = Typography;

const AliappInfoPost = () => {
  const { formRef, onFinish, disabled } = useAliappInfoItem();

  return (
    <Card bodyStyle={{ padding: 20 }}>
      <ProForm
        formRef={formRef}
        onFinish={onFinish}
        layout='horizontal'
        labelCol={{ xs: 10, md: 7 }}
        labelAlign='left'
        submitter={{
          render: () => {},
        }}
      >
        <Row gutter={[30, 30]} wrap>
          <Col xs={24} md={8}>
            <Title level={5} style={{ marginBottom: 20 }}>
              营业执照资质
            </Title>
            <ProForm.Item
              label={''}
              name='license_pic'
              rules={[{ required: true, message: '请上传营业执照资质' }]}
            >
              <UploadImage defaultText='请上传营业执照' disabled={disabled} />
            </ProForm.Item>
          </Col>
          <Col>
            <Title level={5} style={{ marginBottom: 20 }}>
              营业执照信息
            </Title>
            <ProFormText
              name='license_name'
              label='营业执照名称'
              rules={[{ required: true, message: '请输入营业执照名称' }]}
              width='md'
              disabled={disabled}
            />
            <ProFormText
              name='license_number'
              label='营业执照号'
              rules={[{ required: true, message: '请输入营业执照号' }]}
              width='md'
              disabled={disabled}
            />
            <ProFormDatePicker
              name='license_valid_date'
              label='营业执照有效期'
              rules={[{ required: true, message: '选择营业执照有效期' }]}
              disabled={disabled}
            />
          </Col>
        </Row>
        <Row gutter={[30, 30]}>
          <Col xs={24} md={8}>
            <Title level={5} style={{ marginBottom: 20 }}>
              门头照
            </Title>
            <ProForm.Item
              label={''}
              name='out_door_pic'
              rules={[{ required: true, message: '请上传门头照' }]}
            >
              <UploadImage defaultText='请上传门头照' disabled={disabled} />
            </ProForm.Item>
          </Col>
          <Col>
            <Title level={5} style={{ marginBottom: 20 }}>
              特殊资质（快宝合作协议 + 快宝营业执照/快递末端备案回执）
            </Title>
            <ProForm.Item
              label={''}
              name='special_license_pic'
              rules={[{ required: true, message: '请上传特殊资质' }]}
            >
              <UploadImage defaultText='请上传特殊资质' maxCount={3} disabled={disabled} />
            </ProForm.Item>
          </Col>
        </Row>
        {!disabled && (
          <Row justify='center' style={{ marginTop: 20 }}>
            <Space size='large'>
              <Button onClick={() => formRef.current?.resetFields()}>重置</Button>
              <Button type='primary' onClick={() => formRef.current?.submit()}>
                提交
              </Button>
            </Space>
          </Row>
        )}
      </ProForm>
    </Card>
  );
};

export default AliappInfoPost;
